<!DOCTYPE html>
{% load static %}
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>{% block title %}风之宿 - 民宿管理系统{% endblock %}</title>
  <meta name="description" content="风之宿旅馆 - 体验传统日式风情的舒适住宿">
  <meta name="author" content="风之宿">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Tailwind CSS -->
  <link rel="stylesheet" href="{% static 'css/output.css' %}">
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="{% static 'js/echarts.js' %}"></script>
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B5A2B',     // 木色 - 主色调
            secondary: '#D2B48C',   // 浅棕色 - 辅助色
            accent: '#A0522D',      // 棕红色 - 强调色
            neutral: '#F5F5DC',     // 米色 - 背景色
            dark: '#3E2723'         // 深棕色 - 文字色
          },
          fontFamily: {
            sans: ['Noto Sans SC', 'sans-serif'],
            serif: ['Noto Serif SC', 'serif']
          }
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .transition-navbar {
        transition: all 0.3s ease-in-out;
      }
      .shadow-custom {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      }
    }
  </style>

  {% block extra_css %}{% endblock %}
</head>

<body class="bg-neutral text-dark antialiased">
  <!-- 头部导航 -->
  <header id="top-head" class="w-full bg-white/90 backdrop-blur-sm fixed top-0 z-50 transition-navbar">
    <div class="container mx-auto px-4 py-3">
      <div class="flex flex-col md:flex-row items-center justify-between">
        <!-- Logo -->
        <div class="flex items-center w-full md:w-auto mb-3 md:mb-0">
          <h1 id="title" class="text-2xl font-serif font-bold">
            <a href="{% url 'index' %}" class="flex items-center">
              <img src="{% static 'images/logo.png' %}" alt="风之宿" class="h-10 md:h-12 mr-2">
              <span class="text-primary">风之宿</span>
            </a>
          </h1>

          <!-- 移动端菜单按钮 -->
          <div id="nav-toggle" class="ml-auto md:hidden cursor-pointer">
            <div class="w-6 h-5">
              <span class="block w-full h-1 bg-primary mb-1 transition-all"></span>
              <span class="block w-full h-1 bg-primary mb-1 transition-all"></span>
              <span class="block w-full h-1 bg-primary transition-all"></span>
            </div>
          </div>
        </div>

        <!-- 导航菜单 - 桌面端 -->
        <nav id="global_navi" class="hidden md:block">
          <ul class="flex space-x-1 md:space-x-6">
            <li><a href="{% url 'index' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">首页</a></li>
            <li><a href="{% url 'about' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">理念</a></li>
            <li><a href="{% url 'rooms' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">客房</a></li>
            <li><a href="{% url 'cuisine' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">美食</a></li>
            <li><a href="{% url 'facility' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">设施</a></li>
            <li><a href="{% url 'access' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">交通</a></li>
            <li><a href="{% url 'contact' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">联系我们</a></li>

            {% if request.user.is_authenticated %}
              {% if request.user.role == "admin" %}
                <li><a href="{% url 'hotel_admin:dashboard' %}" class="px-3 py-2 rounded bg-accent text-white hover:bg-accent/90 transition-all">管理后台</a></li>
              {% else %}
                <li><a href="{% url 'user:dashboard' %}" class="px-3 py-2 rounded bg-primary text-white hover:bg-primary/90 transition-all">用户中心</a></li>
              {% endif %}
              <li><a href="{% url 'user:logout' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">退出</a></li>
            {% else %}
              <li><a href="{% url 'user:user_login' %}" class="px-3 py-2 rounded hover:bg-primary/10 transition-all">登录</a></li>
            {% endif %}
          </ul>
        </nav>

        <!-- 预订和电话 - 桌面端 -->
        <div class="hidden md:flex items-center space-x-4">
          <a href="{% url 'contact' %}" class="bg-primary text-white px-4 py-2 rounded hover:bg-primary/90 transition-all shadow-md hover:shadow-lg">
            预订
          </a>
          <div class="top-number">
            <p class="flex items-center"><i class="fa fa-phone-square mr-2 text-primary"></i> 0123-45-6789</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobile-nav" class="hidden md:hidden bg-white border-t border-gray-200">
      <div class="container mx-auto px-4 py-3">
        <nav>
          <ul class="space-y-2">
            <li><a href="{% url 'index' %}" class="block py-2 hover:text-primary transition-all">首页</a></li>
            <li><a href="{% url 'about' %}" class="block py-2 hover:text-primary transition-all">理念</a></li>
            <li><a href="{% url 'rooms' %}" class="block py-2 hover:text-primary transition-all">客房</a></li>
            <li><a href="{% url 'cuisine' %}" class="block py-2 hover:text-primary transition-all">美食</a></li>
            <li><a href="{% url 'facility' %}" class="block py-2 hover:text-primary transition-all">设施</a></li>
            <li><a href="{% url 'access' %}" class="block py-2 hover:text-primary transition-all">交通</a></li>
            <li><a href="{% url 'contact' %}" class="block py-2 hover:text-primary transition-all">联系我们</a></li>

            {% if request.user.is_authenticated %}
              {% if request.user.role == "admin" %}
                <li><a href="{% url 'hotel_admin:dashboard' %}" class="block py-2 bg-accent text-white rounded text-center">管理后台</a></li>
              {% else %}
                <li><a href="{% url 'user:dashboard' %}" class="block py-2 bg-primary text-white rounded text-center">用户中心</a></li>
              {% endif %}
              <li><a href="{% url 'user:logout' %}" class="block py-2 hover:text-primary transition-all">退出</a></li>
            {% else %}
              <li><a href="{% url 'user:user_login' %}" class="block py-2 hover:text-primary transition-all">登录</a></li>
            {% endif %}

            <li class="pt-2 border-t border-gray-200">
              <a href="{% url 'contact' %}" class="inline-block bg-primary text-white px-4 py-2 rounded hover:bg-primary/90 transition-all w-full text-center">
                <p>客服</p>
              </a>
              <p class="flex items-center mt-2"><i class="fa fa-phone-square mr-2 text-primary"></i> 0123-45-6789</p>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-- 主要内容 -->
  <main class="pt-16">
    <!-- 消息提示 -->
    {% if messages %}
        <div class="container mx-auto px-4 mt-4">
          {% for message in messages %}
            <div class="p-4 rounded-md mb-4 {% if message.tags == 'success' %}bg-green-100 text-green-800{% elif message.tags == 'danger' or message.tags == 'error' %}bg-red-100 text-red-800{% elif message.tags == 'warning' %}bg-yellow-100 text-yellow-800{% else %}bg-blue-100 text-blue-800{% endif %}">
              {{ message }}
            </div>
          {% endfor %}
        </div>
    {% endif %}

    {% block content %}{% endblock %}
  </main>

  <!-- 页脚导航 -->
  <section id="bottom" class="py-12 bg-dark text-white">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- 网站地图 -->
        <div>
          <h3 class="text-xl font-serif font-semibold mb-6 pb-2 border-b border-gray-600">网站地图</h3>
          <ul class="space-y-2">
            <li><a href="{% url 'index' %}" class="hover:text-secondary transition-colors">首页</a></li>
            <li><a href="{% url 'rooms' %}" class="hover:text-secondary transition-colors">宾馆</a></li>
            <li><a href="{% url 'cuisine' %}" class="hover:text-secondary transition-colors">美食</a></li>
            <li><a href="{% url 'access' %}" class="hover:text-secondary transition-colors">交通</a></li>
            <li><a href="{% url 'contact' %}" class="hover:text-secondary transition-colors">联系我们</a></li>
          </ul>
        </div>

        <!-- 快速链接 -->
        <div>
          <h3 class="text-xl font-serif font-semibold mb-6 pb-2 border-b border-gray-600">快速链接</h3>
          <ul class="space-y-2">
            {% if request.user.is_authenticated %}
              {% if request.user.role == "admin" %}
                <li><a href="{% url 'hotel_admin:dashboard' %}" class="hover:text-secondary transition-colors">管理后台</a></li>
              {% else %}
                <li><a href="{% url 'user:dashboard' %}" class="hover:text-secondary transition-colors">用户中心</a></li>
              {% endif %}
              <li><a href="{% url 'user:logout' %}" class="hover:text-secondary transition-colors">退出登录</a></li>
            {% else %}
              <li><a href="{% url 'user:user_login' %}" class="hover:text-secondary transition-colors">用户登录</a></li>
              <li><a href="{% url 'user:user_register' %}" class="hover:text-secondary transition-colors">用户注册</a></li>
            {% endif %}
          </ul>
        </div>

        <!-- 交通信息 -->
        <div>
          <h3 class="text-xl font-serif font-semibold mb-6 pb-2 border-b border-gray-600">交通信息</h3>
          <p class="mb-4">JR○○站步行5分钟</p>
          <div class="mb-4 rounded overflow-hidden">
            <img src="https://picsum.photos/id/101/300/200" alt="地图" class="w-full h-auto">
          </div>
          <a href="#" class="text-secondary hover:underline flex items-center">
            在Google地图查看
            <i class="fa fa-external-link ml-1"></i>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-black text-white py-8">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row items-center justify-between">
        <div class="mb-6 md:mb-0">
          <a href="{% url 'index' %}" class="inline-block">
            <img src="{% static 'images/logo.png' %}" alt="风之宿" class="h-10">
          </a>
        </div>
        <div class="text-center md:text-right">
          <address class="not-italic mb-4">
            〒123-4567 ○○县市川市市川市00-00<br>
            TEL:123-456-789
          </address>
          <small>&copy; 2023 风之宿. 设计制作 <a href="#" class="text-secondary hover:underline">Syofuso</a></small>
        </div>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动端菜单切换
    document.addEventListener('DOMContentLoaded', function() {
      const navToggle = document.getElementById('nav-toggle');
      const mobileNav = document.getElementById('mobile-nav');

      if (navToggle) {
        navToggle.addEventListener('click', function() {
          mobileNav.classList.toggle('hidden');
          // 切换菜单图标
          const spans = navToggle.querySelectorAll('span');
          spans[0].classList.toggle('rotate-45');
          spans[0].classList.toggle('translate-y-2');
          spans[1].classList.toggle('opacity-0');
          spans[2].classList.toggle('-rotate-45');
          spans[2].classList.toggle('-translate-y-2');
        });
      }

      // 导航栏滚动效果
      const header = document.getElementById('top-head');

      window.addEventListener('scroll', function() {
        if (window.scrollY > 350) {
          header.classList.add('py-2', 'shadow-md');
          header.classList.remove('py-3');
        } else {
          header.classList.add('py-3');
          header.classList.remove('py-2', 'shadow-md');
        }
      });
    });
  </script>

  {% block extra_js %}{% endblock %}
</body>
</html>